<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="coffee-1.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-2.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-3.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-4.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-5.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<script>
    function setupTouchEvents() {
        var lis = document.getElementsByTagName('li'); 
        for(var i = 0; i < lis.length; i++){ 
            lis[i].addEventListener("touchstart", function(){this.className = "touched";}, true); 
            lis[i].addEventListener("touchend", function(){ var a = this; window.setTimeout(function(){a.className = "";}, 500)}, true); 
        }
    }
</script>
<body onload='setupTouchEvents()'>
<h1 class="welcome">Welcome to Mike's coffee</h1>
<h2 class="menu-header">Menu</h2>
<ul>
	<li><a href="#espresso">Espresso</a></li>
	<li><a href="#latte">Latte</a></li>
	<li><a href="#cappucino">Cappucino</a></li>
	<li><a href="#hotchocolate">Hot Chocolate</a></li>
</ul>